// 视图
import React from 'react';
import {
    ScrollView,
    StyleSheet,
    View,
    Text,
} from 'react-native';

export default class CustomScrollView extends React.Component {
    render() {
        return (
            <ScrollView style={styles.mainStyle}
                horizontal={true} // 横向
                showsHorizontalScrollIndicator={false} >
                {this.renderItem()}
            </ScrollView>
        );
    }
    renderItem() {
        // 数组
        // 颜色数组
        var colorAry = ['数组', '颜色数组', '颜色数组测试', '颜色数组', '颜色数组测试', '数组', '数组', '数组', '颜色数组', '颜色数组测试', 'black', 'orange', 'gray', 'green', 'blue', 'yellow', 'black', 'orange'];
        var itemAry = [];
        for (var i = 0; i < colorAry.length; i++) {
            itemAry.push(
                <Text style={{ margin: 5, backgroundColor: 'green' }}>{colorAry[i]}</Text>
            );
        }
        return <View style={{ flex: 1, height: 200, width: 500, backgroundColor: 'red', flexWrap: "wrap", flexDirection: 'row', }}>
            {itemAry}
        </View>;
    }
}
// 样式
const styles = StyleSheet.create({
    scrollViewStyle: {
        // 背景色
        backgroundColor: 'red',
    },

    itemStyle: {
        // 尺寸
        width: 20,
        height: 200,
    },
});
